<template>
  <view class="userlist">
    <view class="search_view">
      <view class="search">
        <image src="../../../static/image/contactuser/search.png" mode="" />
        <input type="text" v-model="searchtext" placeholder="搜索关键词" />
      </view>
    </view>
    <view
      class="item"
      v-for="(item, index) in userarr"
      :key="index"
      @tap="openUserInfo()"
    >
      <view class="icon"> <image :src="item.imgSrc" mode="" /></view>
      <view class="info">
        <view class="user_info">
          <view>{{ item.name }}</view>
          <view>{{ item.type }}</view>
        </view>
        <image
          class="select"
          src="../../../static/image/contactuser/user/select.png"
          mode=""
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchtext: "",
      userarr: [
        {
          name: "苏小洛",
          type: "经理",
          imgSrc:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
        },
        {
          name: "苏小洛",
          type: "经理",
          imgSrc:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
        },
        {
          name: "苏小洛",
          type: "经理",
          imgSrc:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
        },
        {
          name: "苏小洛",
          type: "经理",
          imgSrc:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
        },
        {
          name: "苏小洛",
          type: "经理",
          imgSrc:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005228781,707351298&fm=26&gp=0.jpg",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    openUserInfo() {
      uni.navigateTo({
        url: "/pages/contactuser/userinfo/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.userlist {
  width: 100%;
  min-height: 1500rpx;
  background-color: #f6f7fa;

  .search_view {
    width: 100%;
    height: 130rpx;
    background-color: #3784ff;
    padding-top: 50rpx;
    .search {
      height: 56rpx;
      position: relative;
      image {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        left: 40rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      input {
        display: block;
        width: 650rpx;
        height: 56rpx;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 8px;
        padding-left: 55rpx;
      }
    }
  }
  .item {
    width: 100%;
    height: 140rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20rpx;
    margin-bottom: 8rpx;
    background-color: white;

    .icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: rgba(48, 116, 255, 0.2);
      position: relative;
      image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
      }
    }
    .info {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      .user_info {
        height: 100%;
        margin-left: 28rpx;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: center;
        view:nth-child(1) {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #585f6b;
        }
        view:nth-child(2) {
          height: 26rpx;
          line-height: 26rpx;
          padding: 0 8rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #3074ff;
          background-color: rgba(48, 116, 255, 0.2);
          text-align: center;
        }
      }
      .select {
        display: block;
        width: 8rpx;
        height: 16rpx;
      }
    }
  }
}
</style>
